<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站排行榜展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #EC4899;
            --accent: #F59E0B;
            --success: #10B981;
            --danger: #EF4444;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #F1F5F9;
            --border: #E2E8F0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --radius: 10px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 3rem;
            padding-bottom: 4rem;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .page-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 排行榜通用样式 */
        .ranking-section {
            margin-bottom: 4rem;
            padding: 1.5rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .ranking-header {
            margin-bottom: 1.75rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .ranking-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .ranking-title i {
            color: var(--primary);
        }
        
        .ranking-filters {
            display: flex;
            gap: 0.75rem;
        }
        
        .filter-btn {
            font-size: 0.9rem;
            padding: 0.4rem 1rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .view-all {
            font-size: 0.9rem;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: all 0.2s ease;
        }
        
        .view-all:hover {
            color: #3B34D1;
            gap: 0.5rem;
        }
        
        /* 标准排行榜样式 */
        .standard-ranking {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: var(--radius);
            background-color: white;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
        }
        
        .ranking-item:hover {
            background-color: var(--light-gray);
            transform: translateX(4px);
        }
        
        .rank-number {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .rank-top-1 {
            background-color: rgba(245, 158, 11, 0.15);
            color: var(--accent);
            border: 2px solid var(--accent);
        }
        
        .rank-top-2 {
            background-color: rgba(148, 163, 184, 0.15);
            color: #64748B;
            border: 2px solid #94A3B8;
        }
        
        .rank-top-3 {
            background-color: rgba(209, 112, 147, 0.15);
            color: #D17093;
            border: 2px solid #D17093;
        }
        
        .rank-other {
            background-color: var(--light-gray);
            color: var(--gray);
        }
        
        .rank-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1.25rem;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }
        
        .rank-info {
            flex-grow: 1;
        }
        
        .rank-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .rank-desc {
            color: var(--gray);
            font-size: 0.85rem;
        }
        
        .rank-metrics {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            font-weight: 500;
            color: var(--dark);
            margin-right: 1rem;
        }
        
        .rank-metric {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .rank-metric i {
            color: var(--primary);
        }
        
        .rank-action {
            flex-shrink: 0;
        }
        
        /* 卡片式排行榜 */
        .card-ranking {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .rank-card {
            border-radius: var(--radius);
            overflow: hidden;
            background-color: white;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
            position: relative;
        }
        
        .rank-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.1);
        }
        
        .card-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            z-index: 1;
        }
        
        .card-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
        }
        
        .card-content {
            padding: 1.25rem;
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .card-metrics {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .card-metric {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 数值对比排行榜 */
        .comparison-ranking {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .comparison-item {
            padding: 1.25rem;
            border-radius: var(--radius);
            background-color: white;
            border: 1px solid var(--border);
        }
        
        .comparison-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .comparison-title {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .comparison-change {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .change-up {
            color: var(--success);
        }
        
        .change-down {
            color: var(--danger);
        }
        
        .progress-container {
            width: 100%;
            height: 10px;
            background-color: var(--light-gray);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            border-radius: 5px;
            background: linear-gradient(90deg, var(--primary) 0%, #818CF8 100%);
            transition: width 1s ease-in-out;
        }
        
        .comparison-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 0.75rem;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        /* 分类排行榜 */
        .category-ranking {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 2rem;
        }
        
        .category-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .category-title {
            font-weight: 600;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--primary-light);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .category-title i {
            color: var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .card-ranking {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.85rem;
            }
            
            .ranking-title {
                font-size: 1.35rem;
            }
            
            .ranking-item {
                flex-wrap: wrap;
            }
            
            .rank-metrics {
                width: 100%;
                margin: 0.75rem 0;
                justify-content: space-between;
            }
            
            .rank-action {
                width: 100%;
                text-align: center;
            }
            
            .rank-action .btn {
                width: 100%;
            }
            
            .category-ranking {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .ranking-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .ranking-filters {
                width: 100%;
                flex-wrap: wrap;
            }
            
            .filter-btn {
                flex: 1;
                text-align: center;
            }
            
            .card-ranking {
                grid-template-columns: 1fr;
            }
            
            .rank-avatar {
                width: 50px;
                height: 50px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">社交网站排行榜展示</h1>
            <p class="page-subtitle">多种风格的排行榜布局，直观展示各类数据排名，增强用户竞争与参与感</p>
        </div>
        
        <!-- 1. 标准用户排行榜 - 适合展示用户影响力、粉丝数等排名 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-users"></i> 影响力排行榜</h2>
                <div class="ranking-filters">
                    <button class="filter-btn btn btn-primary">周榜</button>
                    <button class="filter-btn btn btn-outline-primary">月榜</button>
                    <button class="filter-btn btn btn-outline-primary">总榜</button>
                    <a href="#" class="view-all">查看全部 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="standard-ranking">
                <div class="ranking-item">
                    <div class="rank-number rank-top-1">1</div>
                    <img src="https://picsum.photos/seed/user1/200/200" alt="用户头像" class="rank-avatar">
                    <div class="rank-info">
                        <div class="rank-name">科技探索者</div>
                        <div class="rank-desc">分享前沿科技资讯与见解</div>
                    </div>
                    <div class="rank-metrics">
                        <div class="rank-metric"><i class="fas fa-user-plus"></i> 246.3k</div>
                        <div class="rank-metric"><i class="far fa-heart"></i> 1.2M</div>
                        <div class="rank-metric"><i class="far fa-comment"></i> 45.8k</div>
                    </div>
                    <div class="rank-action">
                        <button class="btn btn-sm btn-outline-primary">关注</button>
                    </div>
                </div>
                
                <div class="ranking-item">
                    <div class="rank-number rank-top-2">2</div>
                    <img src="https://picsum.photos/seed/user2/200/200" alt="用户头像" class="rank-avatar">
                    <div class="rank-info">
                        <div class="rank-name">旅行摄影师</div>
                        <div class="rank-desc">用镜头记录世界各地美景</div>
                    </div>
                    <div class="rank-metrics">
                        <div class="rank-metric"><i class="fas fa-user-plus"></i> 198.7k</div>
                        <div class="rank-metric"><i class="far fa-heart"></i> 986.5k</div>
                        <div class="rank-metric"><i class="far fa-comment"></i> 32.4k</div>
                    </div>
                    <div class="rank-action">
                        <button class="btn btn-sm btn-outline-primary">关注</button>
                    </div>
                </div>
                
                <div class="ranking-item">
                    <div class="rank-number rank-top-3">3</div>
                    <img src="https://picsum.photos/seed/user3/200/200" alt="用户头像" class="rank-avatar">
                    <div class="rank-info">
                        <div class="rank-name">美食家小李</div>
                        <div class="rank-desc">发掘城市隐藏美食与食谱分享</div>
                    </div>
                    <div class="rank-metrics">
                        <div class="rank-metric"><i class="fas fa-user-plus"></i> 175.2k</div>
                        <div class="rank-metric"><i class="far fa-heart"></i> 875.3k</div>
                        <div class="rank-metric"><i class="far fa-comment"></i> 63.7k</div>
                    </div>
                    <div class="rank-action">
                        <button class="btn btn-sm btn-outline-primary">关注</button>
                    </div>
                </div>
                
                <div class="ranking-item">
                    <div class="rank-number rank-other">4</div>
                    <img src="https://picsum.photos/seed/user4/200/200" alt="用户头像" class="rank-avatar">
                    <div class="rank-info">
                        <div class="rank-name">健身教练Mark</div>
                        <div class="rank-desc">专业健身指导与健康生活方式</div>
                    </div>
                    <div class="rank-metrics">
                        <div class="rank-metric"><i class="fas fa-user-plus"></i> 156.8k</div>
                        <div class="rank-metric"><i class="far fa-heart"></i> 752.1k</div>
                        <div class="rank-metric"><i class="far fa-comment"></i> 28.9k</div>
                    </div>
                    <div class="rank-action">
                        <button class="btn btn-sm btn-outline-primary">关注</button>
                    </div>
                </div>
                
                <div class="ranking-item">
                    <div class="rank-number rank-other">5</div>
                    <img src="https://picsum.photos/seed/user5/200/200" alt="用户头像" class="rank-avatar">
                    <div class="rank-info">
                        <div class="rank-name">读书达人</div>
                        <div class="rank-desc">每周分享一本好书与阅读感悟</div>
                    </div>
                    <div class="rank-metrics">
                        <div class="rank-metric"><i class="fas fa-user-plus"></i> 132.5k</div>
                        <div class="rank-metric"><i class="far fa-heart"></i> 643.8k</div>
                        <div class="rank-metric"><i class="far fa-comment"></i> 89.2k</div>
                    </div>
                    <div class="rank-action">
                        <button class="btn btn-sm btn-outline-primary">关注</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 2. 卡片式内容排行榜 - 适合展示热门文章、话题等 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-fire-alt"></i> 热门话题排行榜</h2>
                <div class="ranking-filters">
                    <button class="filter-btn btn btn-primary">今日</button>
                    <button class="filter-btn btn btn-outline-primary">本周</button>
                    <button class="filter-btn btn btn-outline-primary">本月</button>
                    <a href="#" class="view-all">更多话题 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="card-ranking">
                <div class="rank-card shadow-sm">
                    <div class="card-badge rank-top-1">1</div>
                    <img src="https://picsum.photos/seed/topic1/400/300" alt="人工智能话题图片" class="card-image">
                    <div class="card-content">
                        <h3 class="card-title">人工智能如何改变未来工作方式</h3>
                        <p class="text-muted text-sm">讨论AI技术对各行各业的影响及未来职场趋势</p>
                        <div class="card-metrics">
                            <div class="card-metric"><i class="far fa-comment"></i> 3.2k 讨论</div>
                            <div class="card-metric"><i class="far fa-eye"></i> 45.7k 浏览</div>
                        </div>
                    </div>
                </div>
                
                <div class="rank-card shadow-sm">
                    <div class="card-badge rank-top-2">2</div>
                    <img src="https://picsum.photos/seed/topic2/400/300" alt="环保话题图片" class="card-image">
                    <div class="card-content">
                        <h3 class="card-title">个人如何为碳中和贡献力量</h3>
                        <p class="text-muted text-sm">分享日常生活中可以实践的环保小行动</p>
                        <div class="card-metrics">
                            <div class="card-metric"><i class="far fa-comment"></i> 2.8k 讨论</div>
                            <div class="card-metric"><i class="far fa-eye"></i> 38.4k 浏览</div>
                        </div>
                    </div>
                </div>
                
                <div class="rank-card shadow-sm">
                    <div class="card-badge rank-top-3">3</div>
                    <img src="https://picsum.photos/seed/topic3/400/300" alt="健康话题图片" class="card-image">
                    <div class="card-content">
                        <h3 class="card-title">办公室人群的健康保护指南</h3>
                        <p class="text-muted text-sm">长时间久坐的健康隐患及预防措施</p>
                        <div class="card-metrics">
                            <div class="card-metric"><i class="far fa-comment"></i> 2.1k 讨论</div>
                            <div class="card-metric"><i class="far fa-eye"></i> 32.6k 浏览</div>
                        </div>
                    </div>
                </div>
                
                <div class="rank-card shadow-sm">
                    <div class="card-badge rank-other">4</div>
                    <img src="https://picsum.photos/seed/topic4/400/300" alt="旅行话题图片" class="card-image">
                    <div class="card-content">
                        <h3 class="card-title">后疫情时代的旅行趋势变化</h3>
                        <p class="text-muted text-sm">旅行者偏好变化及值得关注的新兴目的地</p>
                        <div class="card-metrics">
                            <div class="card-metric"><i class="far fa-comment"></i> 1.9k 讨论</div>
                            <div class="card-metric"><i class="far fa-eye"></i> 29.8k 浏览</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 3. 数值对比排行榜 - 适合展示增长率、活跃度等变化数据 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-chart-line"></i> 社区活跃度排行榜</h2>
                <div class="ranking-filters">
                    <button class="filter-btn btn btn-primary">与上周比</button>
                    <button class="filter-btn btn btn-outline-primary">与上月比</button>
                    <a href="#" class="view-all">详细数据 <i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            
            <div class="comparison-ranking">
                <div class="comparison-item">
                    <div class="comparison-header">
                        <div class="comparison-title"><i class="fas fa-laptop-code"></i> 编程技术区</div>
                        <div class="comparison-change change-up">
                            <i class="fas fa-arrow-up"></i> 12.5%
                        </div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 85%"></div>
                    </div>
                    <div class="comparison-stats">
                        <div>活跃度指数: 85/100</div>
                        <div>参与人数: 12,458</div>
                    </div>
                </div>
                
                <div class="comparison-item">
                    <div class="comparison-header">
                        <div class="comparison-title"><i class="fas fa-camera"></i> 摄影分享区</div>
                        <div class="comparison-change change-up">
                            <i class="fas fa-arrow-up"></i> 8.3%
                        </div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 76%"></div>
                    </div>
                    <div class="comparison-stats">
                        <div>活跃度指数: 76/100</div>
                        <div>参与人数: 9,872</div>
                    </div>
                </div>
                
                <div class="comparison-item">
                    <div class="comparison-header">
                        <div class="comparison-title"><i class="fas fa-utensils"></i> 美食交流区</div>
                        <div class="comparison-change change-up">
                            <i class="fas fa-arrow-up"></i> 5.7%
                        </div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 72%"></div>
                    </div>
                    <div class="comparison-stats">
                        <div>活跃度指数: 72/100</div>
                        <div>参与人数: 8,635</div>
                    </div>
                </div>
                
                <div class="comparison-item">
                    <div class="comparison-header">
                        <div class="comparison-title"><i class="fas fa-plane"></i> 旅行攻略区</div>
                        <div class="comparison-change change-down">
                            <i class="fas fa-arrow-down"></i> 3.2%
                        </div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 68%"></div>
                    </div>
                    <div class="comparison-stats">
                        <div>活跃度指数: 68/100</div>
                        <div>参与人数: 7,921</div>
                    </div>
                </div>
                
                <div class="comparison-item">
                    <div class="comparison-header">
                        <div class="comparison-title"><i class="fas fa-book"></i> 读书分享区</div>
                        <div class="comparison-change change-down">
                            <i class="fas fa-arrow-down"></i> 1.8%
                        </div>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 62%"></div>
                    </div>
                    <div class="comparison-stats">
                        <div>活跃度指数: 62/100</div>
                        <div>参与人数: 6,547</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 4. 分类排行榜 - 适合按类别展示不同领域的排名 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-th-large"></i> 分类内容排行榜</h2>
                <a href="#" class="view-all">全部分类 <i class="fas fa-chevron-right"></i></a>
            </div>
            
            <div class="category-ranking">
                <!-- 视频分类 -->
                <div class="category-column">
                    <h3 class="category-title"><i class="fas fa-video"></i> 热门视频</h3>
                    <div class="standard-ranking">
                        <div class="ranking-item">
                            <div class="rank-number rank-top-1">1</div>
                            <img src="https://picsum.photos/seed/video1/200/200" alt="视频缩略图" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">无人机航拍城市美景</div>
                                <div class="rank-desc">2.4万次观看 · 3天前</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">观看</button>
                            </div>
                        </div>
                        
                        <div class="ranking-item">
                            <div class="rank-number rank-top-2">2</div>
                            <img src="https://picsum.photos/seed/video2/200/200" alt="视频缩略图" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">一分钟学会摄影构图</div>
                                <div class="rank-desc">1.8万次观看 · 5天前</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">观看</button>
                            </div>
                        </div>
                        
                        <div class="ranking-item">
                            <div class="rank-number rank-top-3">3</div>
                            <img src="https://picsum.photos/seed/video3/200/200" alt="视频缩略图" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">程序员的一天工作记录</div>
                                <div class="rank-desc">1.5万次观看 · 1周前</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">观看</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 文章分类 -->
                <div class="category-column">
                    <h3 class="category-title"><i class="fas fa-file-alt"></i> 热门文章</h3>
                    <div class="standard-ranking">
                        <div class="ranking-item">
                            <div class="rank-number rank-top-1">1</div>
                            <img src="https://picsum.photos/seed/article1/200/200" alt="文章封面" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">十年程序员的职业感悟</div>
                                <div class="rank-desc">8.7k 阅读 · 2天前</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">阅读</button>
                            </div>
                        </div>
                        
                        <div class="ranking-item">
                            <div class="rank-number rank-top-2">2</div>
                            <img src="https://picsum.photos/seed/article2/200/200" alt="文章封面" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">如何培养高效学习习惯</div>
                                <div class="rank-desc">7.2k 阅读 · 4天前</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">阅读</button>
                            </div>
                        </div>
                        
                        <div class="ranking-item">
                            <div class="rank-number rank-top-3">3</div>
                            <img src="https://picsum.photos/seed/article3/200/200" alt="文章封面" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">极简主义生活实践指南</div>
                                <div class="rank-desc">6.5k 阅读 · 6天前</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">阅读</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 活动分类 -->
                <div class="category-column">
                    <h3 class="category-title"><i class="fas fa-calendar-alt"></i> 热门活动</h3>
                    <div class="standard-ranking">
                        <div class="ranking-item">
                            <div class="rank-number rank-top-1">1</div>
                            <img src="https://picsum.photos/seed/event1/200/200" alt="活动图片" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">2023年度开发者大会</div>
                                <div class="rank-desc">5.2k 人报名 · 6月15日</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">报名</button>
                            </div>
                        </div>
                        
                        <div class="ranking-item">
                            <div class="rank-number rank-top-2">2</div>
                            <img src="https://picsum.photos/seed/event2/200/200" alt="活动图片" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">城市马拉松公益跑</div>
                                <div class="rank-desc">3.8k 人报名 · 6月25日</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">报名</button>
                            </div>
                        </div>
                        
                        <div class="ranking-item">
                            <div class="rank-number rank-top-3">3</div>
                            <img src="https://picsum.photos/seed/event3/200/200" alt="活动图片" class="rank-avatar">
                            <div class="rank-info">
                                <div class="rank-name">青年创业者交流会</div>
                                <div class="rank-desc">2.4k 人报名 · 7月2日</div>
                            </div>
                            <div class="rank-action">
                                <button class="btn btn-sm btn-outline-primary">报名</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 过滤按钮交互
            const filterButtons = document.querySelectorAll('.filter-btn');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 找到同一组中的所有按钮
                    const parentGroup = this.parentElement;
                    const siblings = parentGroup.querySelectorAll('.filter-btn');
                    
                    // 移除所有按钮的active状态
                    siblings.forEach(btn => {
                        btn.classList.remove('btn-primary');
                        btn.classList.add('btn-outline-primary');
                    });
                    
                    // 设置当前按钮为active状态
                    this.classList.remove('btn-outline-primary');
                    this.classList.add('btn-primary');
                });
            });
            
            // 进度条动画效果
            const progressBars = document.querySelectorAll('.progress-bar');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                // 延迟执行以创建动画效果
                setTimeout(() => {
                    bar.style.width = width;
                }, 300);
            });
            
            // 关注/报名按钮交互
            const actionButtons = document.querySelectorAll('.rank-action .btn');
            actionButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent.trim() === '关注') {
                        this.textContent = '已关注';
                        this.classList.remove('btn-outline-primary');
                        this.classList.add('btn-success');
                    } else if (this.textContent.trim() === '已关注') {
                        this.textContent = '关注';
                        this.classList.remove('btn-success');
                        this.classList.add('btn-outline-primary');
                    } else if (this.textContent.trim() === '报名') {
                        this.textContent = '已报名';
                        this.classList.remove('btn-outline-primary');
                        this.classList.add('btn-success');
                    } else if (this.textContent.trim() === '已报名') {
                        this.textContent = '报名';
                        this.classList.remove('btn-success');
                        this.classList.add('btn-outline-primary');
                    }
                });
            });
        });
    </script>
</body>
</html>
    
